<template>
    <el-card shadow="never" class="border-0">
        <!-- 搜索 -->
        <el-form :model="searchForm" label-width="80px" class="mb-3" size="small">
            <el-row :gutter="20">
                <el-col :span="8" :offset="0">
                    <el-form-item label="真实姓名">
                        <el-input v-model="searchForm.realName" placeholder="真实姓名" clearable></el-input>
                    </el-form-item>


                </el-col>
                <el-col :span="8">
                    <el-form-item label="手机号">
                        <el-input v-model="searchForm.phone" placeholder="手机号" clearable></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <div class="flex items-center justify-end">
                        <el-button type="primary" @click="getData">搜索</el-button>
                        <el-button @click="clickResetBtn">重置</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-form>

        <!-- 表格数据 -->
        <el-table :data="tableData" stripe style="width: 100%" v-loading="tableDataLoading" :border="true"
            @select="handlerSelect"
            @selection-change="handleSelectionChange"
            @row-click="rowClickHandle"
            ref="multipleTableRef"
        >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="realName" label="真实姓名" align="center"></el-table-column>

            <el-table-column prop="roleType" label="角色类型" #default="{ row }" align="center">
                <span v-if="row.roleType == '0'">工程师</span>
                <span v-if="row.roleType == '1'">客户</span>
                <span v-else>-</span>
            </el-table-column>

            <el-table-column prop="deptName" label="部门名称" align="center"></el-table-column>

            <el-table-column prop="phone" label="手机号" #default="{ row }" align="center">
                {{ row.phone }}
            </el-table-column>

            <el-table-column prop="idCard" label="身份证" #default="{ row }" align="center">
                {{ row.idCard }}
            </el-table-column>

            <el-table-column prop="email" label="邮箱"></el-table-column>

            <el-table-column prop="sex" label="性别" align="center">
                <template #default="{ row }">
                    {{ transferSex(row.sex) }}
                </template>
            </el-table-column>

            <el-table-column prop="isBind" label="绑定状态" align="center">
                <template #default="{ row }">
                    {{ transferWxUserBind(row.isBind) }}
                </template>
            </el-table-column>

            <el-table-column label="绑定时间" align="center">
                <template #default="{ row }">
                    {{ dateFormatter(row.bindTime) }}
                </template>
            </el-table-column>

            <el-table-column prop="wechatNick" label="微信昵称" align="center"></el-table-column>

            <el-table-column prop="address" label="详细地址" show-overflow-tooltip></el-table-column>
            <el-table-column prop="remark" label="备注信息" show-overflow-tooltip></el-table-column>

            <el-table-column prop="state" label="状态" align="center">
                <template #default="{ row }">
                    {{ transferWxUserState(row.state) }}
                </template>
            </el-table-column>

            <el-table-column label="创建时间" align="center">
                <template #default="{ row }">
                    {{ dateFormatter(row.createTime) }}
                </template>
            </el-table-column>

            <el-table-column prop="createPersonName" label="创建人" align="center">
                <template #default="{ row }">
                    {{ row.createPersonName }}
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <div class="flex items-center justify-center mt-5">
            <el-pagination background layout="prev, pager ,next" :total="total" :current-page="currentPage"
                :page-size="limit" @current-change="getData" />
        </div>
    </el-card>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { api_user_list } from "~/api/userApi";
import { transferSex, transferWxUserBind, dateFormatter, transferWxUserState } from '~/utils/common.js'

// define props
const props = defineProps({
    roleType: {
        type: String, 
        default: ''
    }
})

const tableData = ref([]) // 列表数据
const currentPage = ref(1)
const total = ref(0)
const limit = ref(10)
const tableDataLoading = ref(false)
const selectCheckList = ref([])
const multipleTableRef = ref()

const searchForm = reactive({
    realName: "",
    phone: "",
    roleType: props.roleType,
    page: currentPage.value,
    size: limit.value,
})



function rowClickHandle(row) {
  const selectData = selectCheckList
  multipleTableRef.value.clearSelection()
  if (selectData.length == 1) {
        const [item] = selectData;
        const shouldSelect = item !== row;
        multipleTableRef.value.toggleRowSelection(row, shouldSelect);
  } else {
      multipleTableRef.value.toggleRowSelection(row, true);
  }
}
// 当用户手动勾选数据行的 Checkbox 时触发的事件
function handlerSelect(selection, row) {
  // 清除 所有勾选项
  multipleTableRef.value.clearSelection()
  if(selection.length == 0) return
  multipleTableRef.value.toggleRowSelection(row,true)
}
// 当选择项发生变化时会触发该事件
function handleSelectionChange(val) {
  selectCheckList.value = val
  getCheckedCustomer()
}


// 生命周期
onMounted(() => {
    //加载表格数据
    getData()

})

//获取列表数据
function getData(p = null) {
    if (typeof p == "number") {
        currentPage.value = p
    }

    tableDataLoading.value = true
    searchForm.page = currentPage.value
    api_user_list(searchForm)
        .then(res => {
            console.log('resp data: ', res)
            tableData.value = res?.records
            total.value = res.total
        })
        .finally(() => {
            tableDataLoading.value = false
        })
}

// 对外暴露方法
const emit = defineEmits([
    'getCheckedCustomer',
])

const getCheckedCustomer = () => {
    const selectData = selectCheckList
    console.log('select data: ', selectData.value[0])
    let returnParams = selectData.value.length == 1 ? selectData.value[0] : null
    console.log('return params: ', returnParams)
    emit("getCheckedCustomer", returnParams)
}
</script>

<style>
.el-table__header-wrapper  .el-checkbox{
	display:none
}
</style>
